<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body,html {
          text-align: center;
          font-size: 14px;
          color: #87968e;
          background: #fff2e3;
      }
      h1 {
          
      }
      p { margin: 0 auto;}
      .btn{
          display: inline-block;
          border-radius: 2px;
          background: #72b890;
          padding: 1em;
          color: white;
        }
       .btn:hover {
           opacity: 0.6;
       }
      .demo2 {
          margin: 30px auto;
      }  
        .active {
            opacity: 0.6;
        }
       .img {
           margin: 30px auto;
           height: 300px;
           width: 300px;
           background: url('http://cdn.jscode.me/65d4aba2-a097-4b24-aaa0-ebbaf7eedab2')  no-repeat;  
           background-size:cover;
       } 
    </style>
</head>
<body>
    <h1>标题啊</h1>
    <p>这是个介绍</p>
    <br>
    <div class="demo">
        <a  class="btn active">red</a>
        <a  class="btn">yellow</a>
        <a  class="btn">ss</a>
        <a  class="btn">dd</a>
        <a  class="btn">aa</a>
    </div>
    <div class="img"></div>
    <div class="demo2">
        <a  class="btn">呵呵</a>
        <a  class="btn">哈哈</a>
    </div>
    <div class="demo3">
        作者:<a style="color: #72b890;">我</a>  
    </div>
</body>
</html>